﻿<template>
  <div>
    <!--头部-->
    <div class="header">
      <div class="header-left">
        <img src="@/assets/logo.png" alt="">
        <div class="title"></div>
      </div>

      <div class="header-center">
        <div class="header-nav">
          <el-menu :default-active="$route.path" mode="horizontal" router>
            <el-menu-item index="/front/index">首页</el-menu-item>
            <el-menu-item index="/front/news">新闻中心</el-menu-item>
            <el-menu-item index="/front/activity">活动预约</el-menu-item>
            <el-menu-item index="/front/record">预约记录</el-menu-item>
            <el-menu-item index="/front/message">留言反馈</el-menu-item>
          </el-menu>
        </div>
      </div>

      <div class="header-right">
        <!--        搜索框-->
        <div style="width: 400px; margin-right: 30px;position: relative">
          <el-input size="medium" style="width: 300px;" v-model="input" clearable placeholder="请输入活动标题搜索"> </el-input>
          <i class="el-icon-search" style="position: absolute;top: 44px;left: 368px;" @click="search"></i>
        </div>
        <!--        登录和头像-->
        <div v-if="user.userName"  @click="$router.push('/login')" style="display: flex;">
          <el-dropdown>
            <div class="header-dropdown">
              <img :src="user.avatar" alt="">
              <div style="margin-left: 10px">
                <span>{{ user.username }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
              </div>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="goToPerson()">个人中心</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div style="text-decoration: none" @click="logout">退出</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-else>
          <div style="width: 50px;height: 50px;border-radius: 40px;border: 1px solid #c8c9cb;margin: auto 0;position: relative" >
            <i class="el-icon-user" style="position: relative;bottom:25px;right: 16px;"></i>
          </div>
        </div>
      </div>

    </div>
    <!--主体-->
    <div>
      <router-view ref="child" />
    </div>

  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "FrontLayout",

  data () {
    return {
      top: '',
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      input: ''
    }
  },

  mounted() {

  },

  methods: {
    goToPerson() {
      if (this.user.role === 1) {
        this.$router.push("/manager/pAdmin")
      }
      if (this.user.role === 2) {
        this.$router.push("/manager/pUser")
      }

    },
    // 退出登录
    logout() {
      localStorage.removeItem("user");
      this.$router.push("/login");
    },
    search(){
      // 用 url拼接传参 到活动预约页面
      // 随机数是为了保证唯一
      this.$router.replace('/front/activity?input=' + this.input + '&random' + Math.random())
      this.$refs.child.searchActivity();
    }

  }

}
</script>

<style scoped>
@import "@/assets/front.css";
@import "@/assets/view.css";

</style>